<!--增删改查通用列表组件-->
<template>
  <a-table :dataSource="tableList.list" :columns="config.columns" :rowKey="config.columns[0].key" class="cur-table"
           :pagination="false">
    <template #bodyCell="{ column ,record}">
      <template v-if="column.key === 'action'">
        <span>
          <a v-for="item in config.otherFn" @click="item.fn(record)">{{ item.name }}</a>
          <a v-if="config.editFn" @click="config.editFn(record)">编辑</a>
          <a v-if="config.deleteFn" @click="del(record)">删除</a>
        </span>
      </template>
      <template v-if="column.key === 'tags'">
        <a-tag
            v-for="name in record[column['dataIndex'].split('.')[0]]"
            :key="name"
        >
          {{ name[column['dataIndex'].split('.')[1]] }}
        </a-tag>
      </template>
    </template>
  </a-table>
  <a-pagination v-model:current="tableList.cuurent" :pageSize="tableList.size" :total="tableList.total" show-less-items
                @change="cgpage"/>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, defineEmits} from "vue";
import {message} from "ant-design-vue";

export default defineComponent({
  props: ["config", "tableList"],
  emits: ["cg-page"],
  setup({config, tableList}, context) {
    // const emit = defineEmits(["cg-page"])
    const cgpage = (a) => {
      context.emit("cg-page", a);
    }

    const del = (r) => {
      
      config.deleteFn(r).then(res => {

        message.info("删除成功")
        context.emit("cg-page", tableList.cuurent);
      })
    }

    return {
      cgpage,
      del
    };
  },
});
</script>
<style scoped>
.cur-table {
  margin-top: 15px;
}

.cur-table a {
  margin-left: 10px;
}
</style>